<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

</head>
<body>
    <button id="add"> add </button>
    <button id="reduce"> reduce</button>
    <div id="div1" style="width: 200px;height: 200px; background-color: red;opacity: 0.3;"></div>
    <script>
        var oAdd = document.getElementById("add"),
            oReduce = document.getElementById("reduce"),
            oDiv = document.getElementById("div1"),
            iAlpha = Math.round(oDiv.style.opacity * 100);
        oAdd.onclick = function(){
            iAlpha += 10;
            if(iAlpha > 100){
                iAlpha = 100;
            }else{
                oDiv.style.opacity = iAlpha / 100;
            }
        };
        oReduce.onclick = function(){
            iAlpha -= 10;
            if(iAlpha < 0){
                iAlpha = 0;
            }else{
                oDiv.style.opacity = iAlpha / 100;
            }
        };
    </script>
</body>
</html>